<template>
  <div class="containerRegister">
    <div class="containerRegister__login">
      <div class="containerRegister__login__header">
        <div
          class="containerRegister__login__header__left iconfont"
          @click="toBack"
        >
          &#xe84f;
        </div>
        <div class="containerRegister__login__header__mid">RESET</div>
        <div class="containerRegister__login__header__right"></div>
      </div>
      <div class="containerRegister__login__content">
        <input
          type="text"
          placeholder="请输入手机号"
          class="containerRegister__login__content__zh"
          v-model="phone"
        />
        <input
          type="password"
          placeholder="请输入新的密码"
          class="containerRegister__login__content__psd"
          v-model="password"
        />
        <input
          type="password"
          placeholder="请再次确认密码"
          class="containerRegister__login__content__psd"
          v-model="rePassword"
        />

        <button
          class="containerRegister__login__content__btn"
          @click="handleReset"
        >
          重置密码
        </button>
      </div>
    </div>
  </div>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <Toast v-if="isShow" :message="toastMessage" />
  </transition>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import api from "../api";
import Toast, { showToastEffect } from "../components/Toast.vue";
import { useBackRouterEffect } from "../components/effects/backEffect";

const router = useRouter();
const toBack = useBackRouterEffect();
const { showToast, isShow, toastMessage } = showToastEffect();
const phone = ref("13712341234");
const password = ref("12345");
const rePassword = ref("12345");
const resetUserData = reactive({
  phone,
  password,
});
function handleReset() {
  if (password.value !== rePassword.value) {
    showToast("两次密码不一致");
    return;
  }
  api.reset(resetUserData).then((res) => {
    if (res) {
      showToast(res);
      if (res === "重置密码成功") {
        setTimeout(() => {
          router.push("/login");
        }, 2000);
      }
    }
  });
}
</script>
<style lang="scss">
.containerRegister {
  width: 414rem;
  height: 896rem;
  background: url("../image/rain.svg");
  position: relative;
  overflow: hidden;
  &__login {
    width: 100%;
    height: 100%;
    background-color: #c6c6c68c;
    padding-top: 44rem;
    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rem;
      font-size: 20rem;
      &__mid {
        font-weight: bold;
        font-size: 25rem;
        letter-spacing: 2rem;
      }
    }
    &__content {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 150rem;
      &__moreFun {
        width: 350rem;
        display: flex;
        justify-content: space-between;
        margin: -30rem 0 50rem 0;
        font-size: 14rem;
      }
      & input {
        width: 350rem;
        height: 40rem;
        background-color: #ffffff00;
        border: 0;
        border-bottom: 2rem solid #26202076;
        margin-bottom: 50rem;
        font-size: 25rem;
        padding-left: 20rem;
      }
      & > input::placeholder {
        font-size: 22rem;
        color: rgba(28, 49, 23, 0.635);
        font-weight: bold;
      }
      &__btn {
        width: 300rem;
        height: 40rem;
        background-color: #10a096;
        box-shadow: 0 3rem 6rem #06867d;
        border-radius: 10rem;
        font-size: 19rem;
        color: aliceblue;
        font-weight: bold;
        letter-spacing: 10rem;
      }
    }
  }
}
</style>
